@include ('user.header', ['title' => '添加域名'])

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="./">用户中心</a></li>
            <li class="breadcrumb-item"><a href="./forward-list">我的转发</a></li>
            <li class="breadcrumb-item active">添加转发</li>
        </ol>
    </div>
</nav>

<div class="container py-4">
    <div class="row">
        <div class="col-12 col-md-8 mx-auto">
            @if (isset($result))
                @if ($result['status'] == '0')
                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <strong>{{ $result['msg'] }}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @else
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>{{ $result['msg'] }}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            @endif

            <div class="card shadow-sm mb-3">
                <div class="card-body p-3">
                    <form id="addDomainForm" action="{{ url('/api/forward/add') }}" method="post" class="needs-validation" novalidate>
                        @csrf
                        <input type="hidden" name="api_token" value="{{ session('user')->api_token }}">
                        
                        <div class="mb-3">
                            <label for="domain" class="form-label fw-bold">域名</label>
                            <input type="text" name="domain" id="domain" value="{{ old('domain') }}" 
                                   class="form-control" placeholder="如：6e1.cn" required/>
                            <div class="invalid-feedback">请输入域名</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="type" class="form-label fw-bold">类型</label>
                            <select name="mode" id="mode" class="form-select">
                                <option value="0"{{ old('mode') == '0' ? ' selected' : '' }}>显性转发</option>
                                <option value="1"{{ old('mode') == '1' ? ' selected' : '' }}>隐性转发</option>
                                <option value="2"{{ old('mode') == '2' ? ' selected' : '' }} disabled>页面停放</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="url" class="form-label fw-bold">目标地址</label>
                            <input type="url" name="url" id="url" value="{{ old('url') }}" 
                                   class="form-control form-control-lg" placeholder="如：http://www.mengyunblog.com"/>
                        </div>

                        <div class="mb-3">
                            <label for="title" class="form-label fw-bold">页面标题</label>
                            <input type="text" name="title" id="title" value="{{ old('title') }}" 
                                   class="form-control form-control-lg" placeholder="如：彩虹网址导航"/>
                        </div>

                        <div class="mb-3">
                            <label for="keywords" class="form-label fw-bold">关键字</label>
                            <input type="text" name="keywords" id="keywords" value="{{ old('keywords') }}" 
                                   class="form-control form-control-lg" placeholder="如：WAP网址,在线工具,网址大全"/>
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label fw-bold">页面描述</label>
                            <input type="text" name="description" id="description" value="{{ old('description') }}" 
                                   class="form-control form-control-lg" placeholder="如：彩虹网址导航是一个综合性网址导航，为所有访客提供快捷方面的..."/>
                        </div>

                        <div class="mb-3">
                            <label for="park" class="form-label fw-bold">停放页面</label>
                            <select name="park" id="park" class="form-select form-select-lg">
                                <option value="default.html">默认页面</option>
                            </select>
                        </div>

                        <div class="d-grid gap-2 mt-4">
                            <button type="submit" class="btn btn-primary btn-sm rounded-pill py-2 fs-6 shadow-sm">
                                <i class="bi bi-plus-circle me-1"></i>添加转发记录
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-4">
            <div class="panel panel-default">
                <div class="panel-body">
                    <p><span class="glyphicon glyphicon-info-sign"></span> 使用前，请先把域名解析到以下服务器中的任意一个服务器！</p>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>记录类型</th>
                                <th>记录值</th>
                            </tr>
                        </thead>
                        <tbody>
                           {!!admin_setting('domain_jx')!!}
                        </tbody>
                    </table>
                    <hr/>
                    <b>显性转发</b><br/>
                    当访客访问您的域名时，直接跳转至您所指定的网址。<hr/>
                    <b>隐性转发</b><br/>
                    当访客访问您的域名时，会显示您所指定的网址的内容，并且地址栏的网址不会发生变化。
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* 表单控件增强样式 */
    .form-control, .form-select {
        border-radius: 0.4rem; /* 减小圆角 */
        border-width: 1.5px;   /* 减细边框 */
        padding: 0.5rem 0.75rem; /* 缩小内边距 */
        transition: all 0.2s ease-in-out;
        font-size: 0.875rem;   /* 新增：减小默认文字大小 */
    }
    
    /* 卡片容器微动效 */
    .card {
        transition: transform 0.3s ease;
    }
    
    .card:hover {
        transform: translateY(-3px); /* 减小悬停动效幅度 */
    }
</style>

<script>
    $(document).ready(function() {
        // 初始化字段显示（强制显示显性转发字段）
        function initializeFormFields() {
            let mode = $("#mode").val() || '0';
            
            // 重置所有字段状态
            $(".mb-3").show().find("input, select").prop("disabled", false);
            
            switch(mode) {
                case '0':
                    // 显性转发：只保留域名、类型、目标地址
                    $("#url").closest(".mb-3").nextAll().hide()
                             .find("input, select").prop("disabled", true);
                    break;
                case '1':
                    // 隐性转发：启用标题相关字段
                    $("#url").prop("required", true);
                    $("#title, #keywords, #description").prop("required", false);
                    $("#park").closest(".mb-3").hide()
                              .find("select").prop("disabled", true);
                    break;
                case '2':
                    // 停放页面：仅保留停放字段
                    $("#park").prop("required", true);
                    $("#url, #title, #keywords, #description").closest(".mb-3").hide()
                             .find("input, select").prop("disabled", true);
                    break;
            }
        }

        // 首次初始化
        initializeFormFields();
        
        // 监听模式变化
        $("#mode").change(function() {
            initializeFormFields();
        });

        // 表单提交处理
        $('#addDomainForm').submit(function(event) {
            event.preventDefault(); // 阻止默认表单提交行为

            // 获取表单数据
            var formData = $(this).serialize();

            // 发送 AJAX 请求
            $.ajax({
                url: "{{ url('/api/forward/add') }}",
                type: "POST",
                data: formData,
                headers: {
                    'Authorization': 'Bearer {{ session('user')->api_token }}'
                },
                success: function(response) {
                    // 处理成功响应
                    if (response.status == '1') {
                        alert('添加成功');
                        window.location.href = "/user/forward-list"; // 跳转到域名列表页面
                    } else {
                        alert('添加失败: ' + response.msg); // 显示错误信息
                    }
                },
                error: function(response) {
                    // 处理错误响应
                    alert('添加失败: ' + response.responseJSON.msg); // 显示错误信息
                }
            });
        });
    });
</script>

@include ('user.footer')